<template>
    <div id="teacher">
        <div class="left">
            <el-calendar ref="calendar" v-model="calendarValue">
                <template #date-cell="{ data }">
                    <p
                        :style="`background-color: ${typeFilter(data).name == '可约' ? '#f1ffee' : '#ffe8e8'}; width: 100%; height: 100%;padding:8px`">
                        {{ data.day.split('-').slice(1).join('-').split('-').slice(1).join('-') }}
                    <p>{{ typeFilter(data).name }}</p>
                    </p>
                </template>
            </el-calendar>
        </div>
        <div class="right" v-if="calendarValue">
            <h3 class="rightTitle">详细情况</h3>
            <div class="titleButton">
                <el-button-group>
                    <el-button size="small" @click="pre">上一天</el-button>
                    <el-button size="small" @click="next">下一天</el-button>
                </el-button-group>
            </div>

            <el-divider />
            <div class="rightDetailButton">
                <el-button size="small">可约</el-button>
                <el-button size="small">休息</el-button>
            </div>
            <div class="rightDetail">
                <el-checkbox-group v-model="checkList">
                    <el-checkbox label="Option A" value="Value A" />
                    <el-checkbox label="Option B" value="Value B" />
                    <el-checkbox label="Option C" value="Value C" />
                    <el-checkbox label="disabled" value="Value disabled" disabled />
                    <el-checkbox label="selected and disabled" value="Value selected and disabled" disabled />
                </el-checkbox-group>
            </div>
        </div>
    </div>

</template>
<script setup>
import * as api from '@/api/order/teacher'
import { onMounted, ref } from 'vue';
const calendar = ref()
const calendarValue = ref(null)
const checkList = ref(null)

const pre = () => {
    console.log(calendar.value)
    console.log()
    calendarValue.value = new Date(calendarValue.value.getTime() - 24 * 60 * 60 * 1000)

}
const next = () => {
    calendarValue.value = new Date(calendarValue.value.getTime() + 24 * 60 * 60 * 1000)
}
onMounted(() => {
    getdata()
})
const calendarData = ref([])
const getdata = () => {
    api.dateTimeSpans().then(res => {
        if (res.code == 200) {
            calendarData.value = res.data
        } else {
            Elmessage.error(res.msg)
        }

    }).catch(err => {
        Elmessage.error(err)
    })
}
const typeFilter = (e) => {
    let json = {
        name: '可约',
        timeSpanList: [],
        usable: null
    }
    calendarData.value.forEach(item => {
        if (item.date == e.day) {
            json.name = item.usable ? '可约' : '不可约'
            json.timeSpanList = item.timeSpanList
            json.usable = item.usable
        }
    });
    return json
}
</script>
<style scoped lang="less">
#teacher {
    width: auto;
    height: 85vh;
    margin: 0;
    padding: 0;
    display: flex;
    margin: 8px;

    .left {
        width: auto;
        height: 100%;
        background-color: #fff;
    }

    .right {
        flex: 1;
        height: 100%;
        background-color: #fff;

        .rightTitle {
            margin-top: 17px;
            margin-left: 10px;
            display: inline-block;
            position: relative;
        }

        .titleButton {
            position: absolute;
            right: 15px;
            top: 20px;
        }

        .el-divider {
            margin: 15px 5px;
            width: auto;
        }

        .rightDetailButton {}
    }
}

:deep(.el-calendar) {
    width: 600px;
    margin-left: 10px;

    .is-selected .el-calendar-day p {
        background-color: #ebf5ff !important;
    }
}

:deep(.el-calendar-day) {
    padding: 0;
}
</style>
